<template>
  <div>
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      router
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">

      <!--顶部头像框-->
      <div class="block">
        <el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar>
      </div>
    </el-menu>

    <div class="registerBox">
      <el-form ref="form" :rules="rules" :model="user" label-width="80px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="user.gender" placeholder="请选择">
            <el-option label="男" value="1"></el-option>
            <el-option label="女" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input type="text" placeholder="请输入电话" v-model="user.phone"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" placeholder="请输入密码" v-model="user.password"/>
        </el-form-item>
        <el-form-item label="确认密码" prop="passwordCheck">
          <el-input type="password" placeholder="请确认密码" v-model="user.passwordCheck"/>
        </el-form-item>
        <el-form-item label="真实姓名" prop="true_name">
          <el-input placeholder="选填" v-model="user.true_name"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
          <el-button @click="() => {this.$router.push('/login')}">取消</el-button>
        </el-form-item>
      </el-form>
    </div>




  </div>
</template>

<script>
    export default {
        name: "Register",
      data() {
        //  密码验证
        var validatePass = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入密码'));
          } else {
            if (this.user.passwordCheck !== '') {
              this.$refs.form.validateField('passwordCheck');
            }
            callback();
          }
        };
        // 确认密码验证
        var validatePass2 = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请再次输入密码'));
          } else if (value !== this.user.password) {
            callback(new Error('两次输入密码不一致!'));
          } else {
            callback();
          }
        };
        // 电话号码验证
        var checkPhone = (rule, value, callback) => {
          const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;
          if (!value) {
            return callback(new Error('电话号码不能为空'))
          }
          setTimeout(() => {
            if (!Number.isInteger(+value)) {
              callback(new Error('请输入数字值'))
            } else {
              if (phoneReg.test(value)) {
                callback()
              } else {
                callback(new Error('电话号码格式不正确'))
              }
            }
          }, 100);
        };
        return {
          squareUrl: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
          user: {
            id: null,
            username: '',
            password: '',
            passwordCheck: '',
            phone: '',
            wallet: 0.0,
            true_name: '',
            gander: 0,
            type: 1,
            createTime: null,
          },

          // 表单验证，需要在 el-form-item 元素中增加 prop 属性
          rules: {
            username: [
              {required: true, message: '账号不可为空', trigger: 'blur'}
            ],
            password: [
              {validator: validatePass, trigger: 'blur'}
            ],
            passwordCheck: [
              {validator: validatePass2, trigger: 'blur'}
            ],
            phone: [
              {required: true, trigger: 'blur', validator: checkPhone}
            ]
          },
        };
      },
      computed: {
      },
      methods: {
          //提交注册请求
        onSubmit(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.$axios({
                method: 'post',
                url: '/main/register',
                data: {
                  username: this.user.username,
                  password: this.user.password,
                  phone: this.user.phone,
                  gender: this.user.gender,
                  type: this.user.type,
                  trueName: this.user.true_name,
                  creatTime: new Date().getTime()}
              })
                .then(response => {
                  if (response.data.success) {
                    console.log("register success");
                    this.$router.push('/login');
                  } else {
                    console.log("register failure")
                  }
                })
                .catch(error => {
                  console.log(error);
                });

              // this.$axios.post('/rest/test')
              //   .then(response => {
              //     console.log(response.data.user);
              //   })
            } else {
              console.log('error submit!');
              return false;
            }
          });
        },
      }
    }
</script>

<style scoped>
  .block {
    float: right;
  }

  .registerBox {
    width: 500px;
    margin: 50px auto;
    text-align: center;
    display: block;
  }
</style>
